import React, { FC, useState } from 'react'
import { Outlet } from 'react-router-dom'
import Header from '../home/Header';
import { Tabs, Avatar } from 'antd';
import { HomeOutlined, HeartOutlined, SettingOutlined, FireOutlined } from '@ant-design/icons';
import UserMain from './UserMain';
import UserDynamics from './UserDynamics';
import UserCollection from './UserCollection';
import UserSettings from './UserSettings';

const { TabPane } = Tabs;

interface Props {

}


const User = (props: Props) => {
    const [state, setState] = useState<number>(0);

    return (
        <div className='user-page'>
            <Header type='user-header' affixed></Header>
            <div className=' v-wrap' >
                <div className='user-banner'>
                    {/* 个人中心头像，可更换头像 */}
                    <div className='user-avatar'>
                        <Avatar size='large' style={{ backgroundColor: '#f56a00' }} />
                        <span className='user-name'>超级管理员</span>
                        <span className='user-level'>v 3</span>
                    </div>
                </div>
                <div className='user-navigator'>
                    <Tabs defaultActiveKey="1" size="large" >
                        <TabPane tab={<span><HomeOutlined />主页</span>} key="1">
                            <UserMain />
                        </TabPane>
                        <TabPane tab={<span><FireOutlined />动态</span>} key="2">
                            <UserDynamics />
                        </TabPane>
                        <TabPane tab={<span><HeartOutlined />收藏</span>} key="3">
                            <UserCollection />
                        </TabPane>
                        <TabPane tab={<span><SettingOutlined />设置</span>} key="4">
                            <UserSettings />
                        </TabPane>
                    </Tabs>
                </div>
                <Outlet />
            </div>
        </div>
    )
}

export default User;
